<!-- 跟单-发起策略详情 -->
<template>
  <div class="bg">

    <scroller class="scroller">
      <div class="wrapper" v-if="data">

        <!-- 基础信息 -->
        <div class="info bg2">
          <LImage class="top_texture" :src="Config.img('top_texture.png')"></LImage>

          <div class="row acenter">
            <text class="font36 text1 all">{{data.projectName}}</text>
            <div class="info-man main1">
              <text class="font24 text1">{{T('&{1}人正在跟单').replace("&{1}", data.accountNumber)}}</text>
            </div>
          </div>

          <div class="info-data bg2">

            <div class="column">
              <text class="font24 text1">{{T('累计投入')+'('+symbol+')'}}</text>
              <text class="font24 text1">{{data.totalInvest}}</text>
            </div>

            <div class="column">
              <text class="font24 text1">{{T('累计收益')+'('+symbol+')'}}</text>
              <text class="font24 text1">{{data.totalIncome}}</text>
            </div>

            <div class="column aend">
              <text class="font24 text1">{{T('累计投资人数')}}</text>
              <text class="font24 text1">{{data.totalAccount}}</text>
            </div>
          </div>
        </div>
        
        <!-- 走势图-->
        <div>
          <div class="title">
            <div class="title-image"></div>
            <text class="font36 text1">{{T('平均年化走势')}}</text>
          </div>
          <WeexLineChart class="chart-line" :data="data.averrageYearIncomeList"></WeexLineChart>
        </div>

        <!-- 托管需求 -->
        <div>
          <div class="title">
            <div class="title-image"></div>
            <text class="font36 text1">{{T('托管要求')}}</text>
          </div>
          
          <div class="size bg2">
            <div class="row acenter">
              <div class="row acenter" @click="upClick">
                <text class="font28 text2">{{T('托管类型')}}</text>        
              </div>
              <div class="all"></div>
              <text class="font28 text1">{{T('全API托管')}}</text>                
              <LImage class="explain" :src="Config.img('wenhao.png')" @click="allApiClick"></LImage>
            </div>
            <div class="height30"></div>
            <div class="line bg3"></div>
            <div class="height30"></div>

            <div class="row acenter">
               <text class="font28 text2">{{T('账户权限')}}</text>    
              <div class="all"></div>
              <text class="font28 text1" v-if="spotOrContract">{{T('币币、USDT合约交易')}}</text>
              <text class="font28 text1" v-else>{{T('币币交易')}}</text>
            </div>

            <div class="height30"></div>
            <div class="row acenter">
              <text class="font28 text2">{{T('投入币种')}}</text>
              <div class="all"></div>
              <text class="font28 text1">{{symbol}}</text>
            </div>

            <div class="height30"></div>
            <div class="row acenter">
              <div class="row acenter" @click="storeClick">
                <text class="font28 text2">{{T('资金存入位置')}}</text>
                <LImage class="explain" :src="Config.img('wenhao.png')"></LImage>
              </div>
              <div class="all"></div>
              <text class="font28 text1">{{T('币币账户')}}</text>
            </div>
          </div>
        </div>
        
        <!-- 交易范围 -->
        <div>
          <div class="title">
            <div class="title-image"></div>
            <text class="font36 text1">{{T('交易范围')}}</text>
          </div>
          <div class="size size-pz bg2">
            <text class="font22 text3 all">{{pairStr}}</text>
          </div>
        </div>

        <!-- 发起项目保证金 -->
        <div>
          <div class="title">
            <div class="title-image"></div>
            <text class="font36 text1">{{T('项目保证金')}}</text>
          </div>
          <div class="size bg2">
            <text class="font28 text2">{{data.settled + ' VTN'}}</text>
          </div>
        </div>

        <!-- 盈利分成-->
        <template v-if="data.showStatus == 'online' && profitLayer">
          <div class="title">
            <div class="title-image"></div>
            <text class="font36 text1">{{T('盈利分成')}}</text>
          </div>
          <div class="size bg2">
            <div v-for="(item, index) in profitLayer.range" v-bind:key="index">
              <div class="row acenter" >
                <text class="font28 text2">{{T('盈利>&{1}%的部分').replace("&{1}", item.lowerLimit)}}</text>
                <LImage class="explain" :src="Config.img('wenhao.png')" @click="profitClick"></LImage>
                <div class="all"></div>
                <text class="font28 text1">{{T('分成&{1}%').replace("&{1}", item.proportion)}}</text>
              </div>
              <div class="height30"></div>
            </div>

            <div class="line bg3"></div>
            <div class="height30"></div>
            <div class="row acenter">
              <div class="row acenter" @click="upClick">
                <text class="font28 text2">{{T('分成上限')}}</text>        
                <LImage class="explain" :src="Config.img('wenhao.png')" @click="upClick"></LImage>
              </div>
              <div class="all"></div>
              <text class="font28 text1">{{profitLayer.maxLimit + ' VTN'}}</text>
            </div>

            <div class="height30"></div>
            <div class="row acenter">
              <div class="row acenter" @click="minClick">
                <text class="font28 text2">{{T('最小可用保证金')}}</text>
                <LImage class="explain" :src="Config.img('wenhao.png')"></LImage>
              </div>
              <div class="all"></div>
              <text class="font28 text1">{{profitLayer.minimumAvailableMargin + ' VTN'}}</text>
            </div>
          </div>
        </template>

        <!-- 亏损赔付 -->
        <template v-if="data.showStatus == 'online' && riskIndemnityComment">
          <div class="title">
            <div class="title-image"></div>
            <text class="font36 text1">{{T('亏损赔付')}}</text>
          </div>
          <div class="size bg2">
            <div v-for="(item, index) in riskIndemnityComment.range" v-bind:key="index">
              <div class="row acenter" >
                <text class="font28 text2">{{T('亏损>&{1}%的部分').replace("&{1}", item.lowerLimit)}}</text>
                <LImage class="explain" :src="Config.img('wenhao.png')" @click="lossClick"></LImage>
                <div class="all"></div>
                <text class="font28 text1">{{T('赔付&{1}%').replace("&{1}", item.commentProportion)}}</text>
              </div>
              <div class="height30"></div>
            </div>

            <div class="line bg3"></div>
            <div class="height30"></div>
            <div class="row acenter">
              <div class="row acenter" @click="timeClick">
                <text class="font28 text2">{{T('赔付承诺生效时间')}}</text>        
                <LImage class="explain" :src="Config.img('wenhao.png')"></LImage>
              </div>
              <div class="all"></div>
              <text class="font28 text1">{{T('&{1}天后').replace("&{1}", riskIndemnityComment.effectTime)}}</text>
            </div>
          </div>
        </template>

        <!-- 量化团队介绍-->
        <div>
          <div class="title">
            <div class="title-image"></div>
            <text class="font36 text1">{{T('项目介绍')}}</text>
          </div>
          <div class="size bg2">
            <text class="font28 text2">{{data.projectIntroduct}}</text>
          </div>
        </div>

        <!-- 量化团队介绍-->
        <div>
          <div class="title">
            <div class="title-image"></div>
            <text class="font36 text1">{{T('团队介绍')}}</text>
          </div>
          <div class="size bg2">
            <text class="font28 text2">{{data.teamIntroduct}}</text>
          </div>
        </div>
      </div>
    </scroller>

    <!-- 底部布局 -->
    <div class="bottom bg3" v-if="data">
      
      <div class="share" @click="shareClick">
        <LImage class="share-image" :src="Config.img('share_icon.png')"></LImage>
        <text class="font24 text1">{{T("分享")}}</text>
      </div>

      <div class="but main1" v-if="data.status == 'gold'" @click="oneClick">
        <text class="font32 text1">{{T("一键托管")}}</text>
      </div>
      <div class="but no1" v-else>
        <text class="font32 text1">{{T("暂停入金")}}</text>
      </div>
    </div>
  </div>
</template>

<script>
import Config from "@/_js/config";
import navigator from "@/_js/navigator";
import modal from "@/_js/modal";
import math from "@/_js/math";
import vlink from "@/_js/vlink";


const weexFunction = weex.requireModule("WeexFunction");
import weexHttp from "@/_js/https"; ;

import I18N from "@/_i18n/i18n";
var T = I18N.t;
weexFunction.setTitle(T('量化托管'));

export default {
  components:{
    // DebugView
  },

  data() {
    return {
      T:T,
      Config:Config,
      math:math,

      teamProjectId:"",//项目编号
      data:undefined, //委托详情
    
      spotOrContract:false, //turn全支持、false现货
      symbol:undefined, //投资币
      profitLayer:undefined, //盈利分成
      riskIndemnityComment:undefined, //亏损赔付
      pairStr:undefined, //支持币对
    };
  },

  mounted() {

    this.teamProjectId = navigator.getParam('teamProjectId');

    setTimeout(() => {
      this.httpTrustDetail();
    }, 500);
  },

  methods: {

    /********************************** HTTP*/
    //http跟单策略详情
    httpTrustDetail() {

      modal.showLoad();
      var param = {'teamProjectId': this.teamProjectId};
      weexHttp.post("foundation/queryFundDetail",param,false,(data) => {
        modal.hideLoad();
        if (data.status == 200) {
          var data = data.data;
          
          //项目保证金
          data.settled = math.gfCoin(data.settled, 'VTN');

          //平均年化
          var time = new Date().getTime();
          if (data.averrageYearIncomeList.length == 0) {
            data.averrageYearIncomeList = [{'t':data.createTime, 'e':'0'}, {'t':time, 'e':'0'}];
          } else if (data.averrageYearIncomeList.length == 1) {
            var real = data.averrageYearIncomeList[0];
            data.averrageYearIncomeList.push({'t':time, 'e':real.e});
          }


          var advanceSetting = data.advanceSetting;

          //turn全支持、false现货
          this.spotOrContract = advanceSetting.spotOrContract.length > 1;

          //投资币
          this.symbol = advanceSetting.symbol;

          //盈利分成
          this.profitLayer = advanceSetting.profitLayer;

          //亏损赔付
          this.riskIndemnityComment = advanceSetting.riskIndemnityComment;

          //支持交易对
          var pairStr;
          try {
            var alreadyTradePair = data.alreadyTradePair;
            for (let index = 0; index < alreadyTradePair.length; index++) {
              var pair = alreadyTradePair[index];
              pairStr = pairStr ? (pairStr + '、' + pair) : pair;
            }
            this.pairStr = pairStr;
          } catch (error) {
            this.pairStr = '';
          }
          
          //委托详情
          this.data = data;
        } else {
          modal.toast(data.msg);
        }
      });
    },

    /********************************** 点击方法*/
    ///全仓托管说明
    allApiClick() {
      var parm = {'message':T('全API托管具有排他性： 1、项目将占有托管API内所有资产和交易权限，期间不可进行手动交易、划转资金等操作； 2、托管时账户只可保留投入币种，请将其他币种转出； 3、强烈建议使用交易所子账户功能创建包含相应交易权限的API进行托管。')};
      modal.alert(parm,(bool)=>{
      });
    },

    //资金存入位置
    storeClick() {
      var parm = {'message':T('资金存入位子')};
      modal.alert(parm,(bool)=>{
      });
    },

    //盈利分成说明
    profitClick(){
      var parm = {'message':T('项目发起方要求在您盈利后收取收益分成，分成将以保证金结算。例：如盈利>10%的部分分成50%。即当总收益率>10%时，其中10%的盈利不收取费用，超过10%部分的收益将被收取50%费用。')};
      modal.alert(parm,(bool)=>{
      });
    },

    //分成上限
    upClick() {
      var parm = {'message':T('结算时收取分成的最大金额，超过部分不收取。')};
      modal.alert(parm,(bool)=>{
      });
    },

    //最小可用保证金
    minClick(){
      var parm = {'message':T('启动时保证金最小可用数量限制，低于此值不可启动， 执行不受此值限制。')};
      modal.alert(parm,(bool)=>{
      });
    },
    
    //亏损赔付说明
    lossClick() {
      var parm = {'message':T('项目发起方承诺在您亏损后赔付部分损失，赔付将以保证金结算至收益账户。例：如亏损>10%的部分赔付50%。即当总收益率<-10%时，其中-10%的亏损不享受赔偿，超过-10%部分的亏损将得到50%赔偿。')};
      modal.alert(parm,(bool)=>{
      });
    },

    //赔付承诺生效时间
    timeClick(){
      var parm = {'message':T('生效时间之前退出的将不会获得赔偿')};
      modal.alert(parm,(bool)=>{
      });
    },

    //一键跟单
    oneClick(){
      if (!Config.forceLogin()) {
        return;
      }

      var param = {'teamProjectId':this.teamProjectId};
      navigator.open('', "follw/OnTrust", param);
    },

    //分享
    shareClick(){
      
      vlink.getTrust(this.teamProjectId, (vcode, vtip)=>{
        
        var advanceSetting = this.data.advanceSetting;
        var param = {'teamName':this.data.teamName,
                    'projectName':this.data.projectName,
                    'investCoin':advanceSetting.symbol,
                    'totalAccount':this.data.totalAccount,
                    'averageYearIncome':this.data.averageYearIncome};
        param = {'param':param, 
                 'vcode':vcode,
                 'vtip':vtip};
        weexFunction.shareWeex('share/ShareTrust', param);
      });
    },
  }
};

</script>


<style src="@/_css/style.css"></style>
<style scoped>
/***************基础*/
.bg {
  position: absolute;
  width: 750px;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
.scroller {
  flex: 1;
}
.wrapper {
  flex-direction: column;
  padding-left: 20px;
  padding-right: 20px;
  padding-bottom: 40px;
}
.line{
  height: 1px;
}
.explain {
  width: 28px;
  height: 28px;
  margin-left: 8px;
}

/*************** 标题*/
.title {
  margin-left: 20px;
  margin-top: 40px;
  margin-bottom: 20px;
}
.title-image {
  position: absolute;
  width: 128px;
  height: 16px;
  border-radius: 8px;
  background-image: linear-gradient(to right, #1677FE, #151A2A);

  bottom: 0;
  left: 0;
}

/*************** 基础信息*/
.info{
  flex-direction: column;

  border-bottom-left-radius: 24px;
  border-bottom-right-radius: 24px;

  padding-left: 40px;
  padding-top: 40px;
  padding-bottom: 60px;

  margin-left: -20px;
  margin-right: -20px;
}
.info-man {
  flex-direction: row;
  align-items: center;
  height: 58px;
  border-top-left-radius: 28px;
  border-bottom-left-radius: 28px;

  padding-left: 30px;
  padding-right:20px;

  margin-left: 20px;
}
.info-data {
  flex-direction: row;
  justify-content: space-between;
  margin-right: 40px;
  margin-top: 60px;
}

/*************** 走势图*/
.chart-line {
  height: 450px;

  margin-left: 40px;
  margin-right: 40px;
}

/*************** 方框*/
.size {
  flex-direction: column;
  border-radius: 24px;

  padding-left: 40px;
  padding-right: 40px;
  padding-top: 30px;
  padding-bottom: 30px;
}
.size-pz {
  padding-top: 20px;
  padding-bottom: 20px;
}

/*************** 按钮*/
.bottom{
  flex-direction: row;
  align-items: center;
  padding-top: 20px;
  padding-bottom: 60px;
  padding-right: 40px;
  padding-left: 40px;
}
.share{
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 110px;
  margin-right: 30px;
}
.share-image {
  height: 40px;
  width: 40px;
}
.but {
  justify-content: center;
  align-items: center;
  flex: 1;
  height: 80px;
  border-radius: 12px;
}

/*************** 间距*/
.height10 {
  height: 10px;
}
.height20 {
  height: 20px;
}
.height30{
  height: 30px;
}
</style>
